<template>
	<view>
		<view class="form">
			<u--form labelPosition="left" ref="uForm">
				<u-form-item label="部门名称" borderBottom ref="item1" labelWidth="200">
					<u--input border="none" v-model="form.name"></u--input>
				</u-form-item>
			</u--form>
			<view class="u-flex a-center">
				<view class="w105">
					部门层级
				</view>
				<view class="w200">
					<uni-data-select v-model="value" :localdata="list" @change="change" class="w200"></uni-data-select>
				</view>
			</view>
			<view class="u-flex a-center">
				<view class="w105">
					部门主管
				</view>
				<MultipleSelect :selectList="empList" :selectData="selectData" @change="multipleChange"
					@del="delItem">
				</MultipleSelect>
			</view>
		</view>
		<view class="footer pd-10">
			<view class="save-btn" @click="saveBtn">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import MultipleSelect from '../../pages/components/select/MultipleSelect.vue.vue';
	export default {
		components: {
			MultipleSelect
		},
		data() {
			return {
				value:'',
				form: {
					name: ''
				},
				custAccId:'',
				title: '部门层级',
				list: [
				],
				show: false,
				selectData:[],
				selectData2:[],
				empList: [],
				saveempList:[],
				acId:'',
				stFather:''
			};
		},
		onLoad() {
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId=uni.getStorageSync('acId')
			this.find_AllEmp()
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				
				this.find_AllEmp()
				
			},
			// 查询员工
			async find_AllEmp() {
				const res = await uni.$api.authority.findAllEmp({
					custAccId: this.custAccId
				})
				
				this.empList = res.data.map(i => {
					return {
						label: i.empName,
						value: i.id,
						...i
					}
				})
				this.find_AllStructure()
			},
			change(e) {
				let a= this.list.filter((v)=>{
					return e===v.id
				})
				this.stFather=a[0].stFather
			},
			async find_AllStructure() {
				const res = await uni.$api.organization.findAllStructure({
					custAccId: this.custAccId
				})
				this.list = res.data
				this.list = res.data.map((i) => {
					return {
						...i,
						text: i.stName,
						value: i.id,
						stFather:i.stFather
					}
				
				});
				uni.stopPullDownRefresh()
			},
			multipleChange(val, idx) {
				this.saveempList=val
				this.saveempList.map((v,i)=>{
					this.saveempList[i]={
						id:v
					}
				})
				console.log(this.saveempList)
			},
			multipleChange2(e) {
				// this.stFather=val.stFather
				console.log(e,this.stFather,'this.stFather')
			},
			async saveBtn() {
				let data = {
					emp:this.saveempList,
					structure: {
						custAccId: this.custAccId,
						stName: this.form.name,
						stFather: this.stFather
					},
				}
				 const res = await uni.$api.authority.addStructure(this.acId,data)
				 console.log(res,'保存')
				 if(res.code===0){
				 	uni.showToast({
				 		title:res.msg
				 	})
				 	setTimeout(()=>{
				 		uni.navigateBack({
				 			delta:1
				 		})
				 	},2000)
				 }
			}
		}
	}
</script>

<style lang="scss">
	.w200 {
		width: 200px;
	}
	.form {
		padding-left: 15px;

		.w105 {
			width: 100px;
			padding: 10px 0;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.save-btn {
		background-color: #fd7400;
		color: #fff;
		height: 50px;
		font-size: 16px;
		border-radius: 2px;
		line-height: 50px;
		text-align: center;
	}
</style>